<template>
  <div class="dialog"
       v-show="showMask">
    <div class="dialog-container">
      <div class="dialog-title">{{title}}</div>
      <div class="content">
        {{content}}
      </div>
      <div class="close-btn"
           @click="closeMask">
        <i class="iconfont close-icon"></i>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: {},
    content: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      showMask: false
    }
  },
  methods: {
    closeMask () {
      this.showMask = false
    }
  },
  mounted () {
    this.showMask = this.value
  },
  watch: {
    value (newVal, oldVal) {
      this.showMask = newVal
    },
    showMask (val) {
      this.$emit('input', val)
    }
  }
}
</script>
<style lang="less" scoped>
.dialog {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  .dialog-container {
    width: 6.7125rem;
    height: 8.1625rem;
    background: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: .1rem;
    position: relative;
    .dialog-title {
      width: 100%;
      height: .75rem;
      font-size: .375rem;
      color: rgba(0, 0, 0, 1);
      font-weight: 400;
      font-family: MicrosoftYaHei;
      padding-top: 3%;
      box-sizing: border-box;
      border-bottom: .0125rem solid #c5c5c5;
    }
    .content {
      color: #797979;
      line-height: .325rem;
      padding: 0 .25rem;
      box-sizing: border-box;
    }
    .close-btn {
      position: absolute;
      top: .2rem;
      right: .2rem;
      width: .375rem;
      height: .375rem;
      line-height: .375rem;
      text-align: center;
      font-size: .225rem;
      cursor: pointer;
      &:hover {
        font-weight: 600;
      }
    }
  }
}
</style>
